<template>
  <div class="rat-card">
    <div class="rat-card-header">
      <div class="rat-card-title">
        <div class="left">
          <i v-if="title||icon" :class="icon"></i>
          {{title}}
        </div>
        <div class="right">
          <a v-if="more" href="/more-link">
            更多
            <i class="el-icon-arrow-right" />
          </a>
        </div>
      </div>
    </div>
    <div class="rat-card-body">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  @Prop({ default: "" }) title!: string;
  @Prop({ default: "" }) icon!: string;
  @Prop() more!: string;
  // bg={backgroundImage: 'url(' + ('~@/assets/images/home/hots-icon.png') + ')'}
}
</script>

<style lang='less' scoped>
.rat-card {
  border: 1px solid #f0f0f2;
  border-radius: 5px;
}
.rat-card-header {
  border-bottom: 1px solid #f0f0f2;
  border-radius: 5px;

  .rat-card-title {
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    border-bottom: 1px solid #f0f0f2;
    .flex-box(row, space-between);

    .left {
      height: 100%;
      font-size: 16px;
      font-weight: bolder;
      .flex-box(row, flex-start);

      .home-hots-icon {
        .wh(24px);
        display: inline-block;
        background: url("~@/assets/images/home/hots-icon.png");
        background-repeat: no-repeat;
        background-size: cover;
        margin-right: 5px;
      }
    }

    .right a {
      color: #999aaa;
      text-decoration: none;
    }
  }
}
.rat-card-body {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 20px;
  width: 100%;
}
</style>